<form
  class="d-flex flex-column h-100"
  [formGroup]="createAssetProfileForm"
  (keyup.enter)="createAssetProfileForm.valid && onSubmit()"
  (ngSubmit)="onSubmit()"
>
  <h1 i18n mat-dialog-title>Add Asset Profile</h1>
  <div class="flex-grow-1 py-3" mat-dialog-content>
    <div class="mb-3">
      <mat-radio-group
        color="primary"
        [value]="mode"
        (change)="onRadioChange($event.value)"
      >
        <mat-radio-button name="auto" value="auto" />
        <label class="m-0" for="auto" i18n>Search</label>
        <mat-radio-button class="ml-3" name="manual" value="manual" />
        <label class="m-0" for="manual" i18n>Add Manually</label>
        <mat-radio-button class="ml-3" name="currency" value="currency" />
        <label class="m-0" for="currency" i18n>Add Currency</label>
      </mat-radio-group>
    </div>

    @if (mode === 'auto') {
      <div>
        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Name, symbol or ISIN</mat-label>
          <gf-symbol-autocomplete
            formControlName="searchSymbol"
            [includeIndices]="true"
          />
        </mat-form-field>
      </div>
    } @else if (mode === 'manual') {
      <div>
        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Symbol</mat-label>
          <input formControlName="addSymbol" matInput />
          <span matTextPrefix>{{ ghostfolioPrefix }}</span>
        </mat-form-field>
      </div>
    } @else if (mode === 'currency') {
      <div>
        <mat-form-field appearance="outline" class="w-100">
          <mat-label i18n>Currency</mat-label>
          <input formControlName="addCurrency" matInput />
          @if (showCurrencyErrorMessage) {
            <mat-error i18n>Oops! Invalid currency.</mat-error>
          }
        </mat-form-field>
      </div>
    }
  </div>
  <div class="d-flex justify-content-end" mat-dialog-actions>
    <button mat-button type="button" (click)="onCancel()">
      @if (createAssetProfileForm.dirty) {
        <ng-container i18n>Cancel</ng-container>
      } @else {
        <ng-container i18n>Close</ng-container>
      }
    </button>
    <button
      color="primary"
      mat-flat-button
      type="submit"
      [disabled]="createAssetProfileForm.hasError('atLeastOneValid')"
    >
      <ng-container i18n>Save</ng-container>
    </button>
  </div>
</form>
